<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>惰性函数与性能</title>
</head>
<body>
  <button id="btn">click</button>
  <script>
    var btn = document.getElementById('btn')
    function foo () {
      console.log(this)
    }
    /**
     * 
     * @param {*} obj 给哪个元素绑定事件
     * @param {*} type 绑定的事件类型
     * @param {*} fn 要做什么操作的函数
     */
    function addEvent(obj, type, fn) {
      // 当前元素是否支持addEventListener
      if (obj.addEventListener) {
        // false 去掉冒泡
        obj.addEventListener(type, fn, false)
      } else if (obj.attachEvent) {
        // 当前元素是否支持 attachEvent
        obj.attachEvent('on' + type, fn)
      } else {
        // 传统形式
        obj['on' + type] = fn
      }
    }

    // 实现惰性函数，若函数被调用很多次，条件判断也会执行很多次，可减少判断
    function addEvent2(obj, type, fn) {
      // 当前元素是否支持addEventListener
      if (obj.addEventListener) {
        // false 去掉冒泡
        addEvent2 = obj.addEventListener(type, fn, false)
      } else if (obj.attachEvent) {
        // 当前元素是否支持 attachEvent
        addEvent2 = obj.attachEvent('on' + type, fn)
      } else {
        // 传统形式
        addEvent2 = obj['on' + type] = fn
      }
      return addEvent2
    }

    addEvent2(btn, 'click', foo)
    addEvent2(btn, 'click', foo)
    addEvent2(btn, 'click', foo)
  </script>
</body>
</html>